<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default Layer Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        .test-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .test-button {
            background: #007acc;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background: #005a9e;
        }
        .test-button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .log {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin: 10px 0;
            max-height: 300px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
        .success { color: #28a745; }
        .error { color: #dc3545; }
        .info { color: #17a2b8; }
    </style>
</head>
<body>
    <h1>🧪 Default Layer Test</h1>
    
    <div class="test-container">
        <h2>测试控制</h2>
        <button class="test-button" onclick="runCodeTest()">运行代码测试</button>
        <button class="test-button" onclick="runBrowserTest()">运行浏览器测试</button>
        <button class="test-button" onclick="clearLog()">清空日志</button>
        <button class="test-button" onclick="exportCode()">导出代码</button>
    </div>
    
    <div class="test-container">
        <h2>测试日志</h2>
        <div id="log" class="log"></div>
    </div>
    
    <div class="test-container">
        <h2>代码预览</h2>
        <pre id="code-preview" style="background: #f8f9fa; padding: 15px; border-radius: 4px; overflow-x: auto;"></pre>
    </div>

    <!-- 引入Cesium -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    
    <script type="module">
        // 导入测试模块
        import defaultLayerCode, { defaultLayerCode as namedExport } from './defaultLayer.js'
        import { testDefaultLayer, testInBrowser } from './defaultLayer.test.js'
        
        // 全局函数
        window.defaultLayerCode = defaultLayerCode
        window.namedExport = namedExport
        window.testDefaultLayer = testDefaultLayer
        window.testInBrowser = testInBrowser
        
        // 日志函数
        function log(message, type = 'info') {
            const logElement = document.getElementById('log')
            const timestamp = new Date().toLocaleTimeString()
            const logEntry = document.createElement('div')
            logEntry.className = type
            logEntry.textContent = `[${timestamp}] ${message}`
            logElement.appendChild(logEntry)
            logElement.scrollTop = logElement.scrollHeight
        }
        
        // 重写console.log等函数
        const originalLog = console.log
        const originalError = console.error
        const originalWarn = console.warn
        
        console.log = function(...args) {
            originalLog.apply(console, args)
            log(args.join(' '), 'info')
        }
        
        console.error = function(...args) {
            originalError.apply(console, args)
            log(args.join(' '), 'error')
        }
        
        console.warn = function(...args) {
            originalWarn.apply(console, args)
            log(args.join(' '), 'info')
        }
        
        // 全局函数
        window.runCodeTest = function() {
            log('开始运行代码测试...', 'info')
            testDefaultLayer()
        }
        
        window.runBrowserTest = function() {
            log('开始运行浏览器测试...', 'info')
            testInBrowser()
        }
        
        window.clearLog = function() {
            document.getElementById('log').innerHTML = ''
        }
        
        window.exportCode = function() {
            const blob = new Blob([defaultLayerCode], { type: 'text/javascript' })
            const url = URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.href = url
            a.download = 'defaultLayer.js'
            a.click()
            URL.revokeObjectURL(url)
            log('代码已导出为 defaultLayer.js', 'success')
        }
        
        // 显示代码预览
        document.getElementById('code-preview').textContent = defaultLayerCode
        
        // 页面加载完成后的初始化
        window.addEventListener('load', () => {
            log('页面加载完成，Cesium版本: ' + (window.Cesium ? Cesium.VERSION : '未加载'), 'info')
            if (window.Cesium) {
                log('✅ Cesium加载成功', 'success')
            } else {
                log('❌ Cesium加载失败', 'error')
            }
        })
    </script>
</body>
</html> 